<template>
    <div class="tags-box">
        <div class="tags" v-for="item in pathList" :key="item.path" :class="{ 'active': item.path === $route.path }"
            @click="tabsHandle($event, item.path)" @contextmenu.prevent.stop="rightClick($event, item.path)">
            <div>{{ item.title }}</div>
            <el-icon>
                <Close />
            </el-icon>
            <ul v-show="otherFlag && (path === item.path)">
                <li>关闭其他</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { useTabsStore } from '@/stores/tabs';
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const tabsStore = useTabsStore();
const pathList = ref(computed(() => tabsStore.pathList));
const otherFlag = ref(false);
const path = ref('');

const router = useRouter();
const route = useRoute();

// 初始化时检查路径
onMounted(() => {
    checkPathList(route.path, route.name, route.meta.title);
});

// 监听路由的 path 变化
watch(
    () => route.path,
    (n) => checkPathList(n, route.name, route.meta.title),
    { immediate: false }
);

// 监听全局点击事件以关闭 otherFlag
let clickListener = null;
const closeOtherFlag = () => {
    otherFlag.value = false;
    if (clickListener) {
        document.documentElement.removeEventListener('click', clickListener);
        clickListener = null;
    }
};

// 方法
function tabsHandle(e, pathVal) {
    const target = e.target;
    if (target.nodeName === 'DIV') {
        router.push(pathVal);
    } else if (target.nodeName === 'svg') {
        const index = pathList.value.findIndex(item => item.path === pathVal);
        if (pathList.value.length <= 1) return;
        pathList.value.splice(index, 1);
        tabsStore.setTabs(pathList.value);
        if (route.path === pathVal) {
            navigateAfterClose(index);
        }
    } else {
        const filteredList = pathList.value.filter(item => item.path === pathVal);
        console.log(filteredList);
        pathList.value = filteredList;
        tabsStore.setTabs(filteredList);
        otherFlag.value = false;
        router.push(pathVal);
    }
}

function rightClick(e, pathVal) {
    const target = e.target;
    if (target.nodeName === 'DIV') {
        otherFlag.value = true;
        path.value = pathVal;
        clickListener = closeOtherFlag;
        document.documentElement.addEventListener('click', clickListener);
    }
}

function checkPathList(pathVal, name, title) {
    const index = pathList.value.findIndex(item => item.path === pathVal);
    if (index === -1) {
        if (pathList.value.length >= 10) {
            pathList.value.shift();
            tabsStore.setTabs(pathList.value);
        }
        pathList.value.push({
            path: pathVal,
            name: name,
            title: title
        });
        tabsStore.setTabs(pathList.value);
    }
}

function navigateAfterClose(index) {
    if (index === 0) {
        router.push(pathList.value[pathList.value.length - 1].path);
    } else {
        router.push(pathList.value[index - 1].path);
    }
}

// 组件卸载时移除事件监听器
onUnmounted(() => {
    closeOtherFlag();
});
</script>

<style scoped>
.tags-box {
    width: 100%;
    height: 34px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8dce5;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);

}

.tags {
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    height: 23px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0px 10px;
    margin-left: 7px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
    display: flex;
    align-items: center;
    position: relative;
}

i {
    margin-left: 5px;
    margin-top: 1px;
}

ul {
    position: absolute;
    background: #fafafa;
    width: 100%;
    padding: 5px;
    left: 0;
    top: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ddd;
    z-index: 999;
}

li {
    list-style: none;
    color: #666;
    text-align: center;
    height: 20px;
    line-height: 20px;
    padding: 5px 0;
}

li:hover {
    background: #eee;
}

.tags:not(.active):hover {
    background: #f8f8f8;
}

.active {
    color: #fff;
    background: #409EFF;
}
</style>